<template>
	<view>
		<!-- 导航栏 -->
		<view class="header-fit-box" :style="'padding-top: '+ StatusBar +'px;'">
			<view class="header-fit" :style="{'height':(CustomBar-StatusBar) +'px'}">
				<image @click="back" class="back" src="@/static/home/subpage/back_black.png"></image>
				<text class="text">资金流向</text>
				<view class="item" @click="sharefix">
					<text class="li">分享</text>
				</view>
			</view>
		</view>
		<view :style="{'height':CustomBar +'px'}" style="border-bottom:2rpx solid #F6F7F9;"></view>
		<view class="content">
			<view class="nav-fix">
				<view class="group-drop">
					<view class="drop-box" @click="isdrop=!isdrop">
						<text>螺纹钢HRB400E 2043</text>
						<image :hidden="isdrop" src="@/static/home/subpage/drop-gray.png"></image>
						<image :hidden="!isdrop" src="@/static/home/subpage/up-red.png"></image>
					</view>
					<view class="right">
						<view class="li" :class="{'active':navfixIndex==0}" @click="navfix(0)">价格</view>
						<view class="li" :class="{'active':navfixIndex==1}" @click="navfix(1)">库存</view>
					</view>
				</view>
				<view class="drop-down" :style="{'display':!isdrop?'none':''}">
					<view class="left-menu">
						<view class="tl" :class="{'active':menuIndex==index}" @click="menufix(index)"
							v-for="(item,index) in 5">黑色金属</view>
					</view>
					<view class="right-info">
						<view class="item" v-for="(item,index) in 2">
							<view class="title">黑色金属</view>
							<view class="tl" :class="{'active':infoIndex==idx}" @click="infofix(idx)"
								v-for="(i,idx) in 10">
								<text>热卷Q235B</text>
								<image class="tab" src="@/static/home/subpage/tab.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="qiun-charts">
				<view :hidden="isshare||isinventory||iscost||isprofit||isdrop" style="width:100%;height:100%;">
					<l-echart ref="mapChart" @finished="mapInit"></l-echart>
				</view>
				<view class="area-box">
					<view class="li" v-for="(item,index) in 4">
						<view class="quan"
							:class="{'br-orange': index==0,'br-blue': index==1,'br-green': index==2,'br-purple': index==3}"></view>
						<view class="text">主产区消费区</view>
					</view>
				</view>
				<view class="icon-box">
					<view class="icon" :class="{'cur':isicon==1}" @click="chooseCost">
						<cover-image class="image" :hidden="isicon==1"
							src="@/static/home/subpage/analysis.png"></cover-image>
						<cover-image class="image" :hidden="isicon!=1"
							src="@/static/home/subpage/analysis_cur.png"></cover-image>
						<view class="text">价格分析</view>
					</view>
					<view class="icon" :class="{'cur':isicon==2}" @click="tradeLines">
						<cover-image class="image" :hidden="isicon==2"
							src="@/static/home/subpage/trade.png"></cover-image>
						<cover-image class="image" :hidden="isicon!=2"
							src="@/static/home/subpage/trade_cur.png"></cover-image>
						<view class="text">贸易流向</view>
					</view>
				</view>
				<view class="pricechange">
					<view class="sup">价格环比变化</view>
					<view class="center-box">
						<view class="left"></view>
						<view class="right">
							<view class="text">+50</view>
							<view class="text">+25</view>
							<view class="text">0</view>
							<view class="text">-25</view>
							<view class="text">-50</view>
						</view>
					</view>
					<view class="sub">单位: 元/吨</view>
				</view>
			</view>

			<view class="bottom-fix-box" :style="{'padding-bottom':botOperateBut+'px'}">
				<view class="bottom-fix">
					<view class="sup-date">
						<text class="active">日度数据(2023-11-08)</text>
						<text>周度数据</text>
						<text>月度数据</text>
					</view>
					<view class="slider-box">
						<view class="text">2022-11-09</view>
						<view class="slider">
							<u-slider v-model="sliderValue" min="0" max="100"
								blockUrl="url(/static/home/subpage/slider-active.png)" height="24"
								activeColor="rgba(0,0,0,0)" inactiveColor="#F4F5F7" :use-slot="true"
								@input="endSlider"></u-slider>
						</view>
						<view class="text">2023-77-08</view>
					</view>
					<view class="sub-btns">
						<image src="@/static/home/subpage/play.png"></image>
						<view class="right">
							<view class="btn">上一期</view>
							<view class="btn">下一期</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分享 -->
		<share-fix :isshare="isshare" :animationData="animationData" @closesharefix="closesharefix"></share-fix>
		<!-- 库存数据 -->
		<view class="inventory-modal" @touchmove.stop.prevent>
			<view class="shade" :hidden="!isinventory"></view>
			<view class="inventory-box" :animation="animation1Data">
				<view class="caption">
					<text>库存数据</text>
					<image @click="closeInventory" src="@/static/home/subpage/close.png"></image>
				</view>
				<scroll-view scroll-y class="item-box">
					<view class="item" v-for="(item,index) in 5">
						<view class="left">
							<view class="sup">钢厂螺纹库存:176.68万吨</view>
							<view class="sub">环比-10.15万吨</view>
						</view>
						<image class="icon-right" src="@/static/home/subpage/icn_right.png"></image>
					</view>
				</scroll-view>
				<view class="dateinfo">数据时间为2023-11-04</view>
			</view>
		</view>
		<!-- 价格分析 -->
		<view class="cost-modal" @touchmove.stop.prevent>
			<view class="shade" :hidden="!iscost"></view>
			<view class="cost-box" :animation="animation2Data">
				<view class="caption">
					<text>综合:螺纹钢基本面偏震荡运行</text>
					<image @click="closeCost" src="@/static/home/subpage/close.png"></image>
				</view>
				<view class="bodys">
					<view class="lab-box">
						<view class="qiun-charts">
							<l-echart ref="radarChart" @finished="radarInit"></l-echart>
						</view>
						<view class="lab1">
							<view class="sup" @click="chooseProfit">
								<text>利润</text>
								<image src="@/static/home/subpage/icn-charts.png"></image>
							</view>
							<view class="sub">
								<view class="info">27.22元/吨 处于低位</view>
							</view>
						</view>
						<view class="lab2">
							<view class="sup">
								<text>全国均价</text>
								<image src="@/static/home/subpage/icn-charts.png"></image>
							</view>
							<view class="sub">
								<view class="info">3949.20元/吨</view>
								<view class="info">-0.06%</view>
							</view>
						</view>
						<view class="lab3">
							<view class="sup">
								<text>库存</text>
								<image src="@/static/home/subpage/icn-charts.png"></image>
							</view>
							<view class="sub">
								<view class="info">578.31万吨</view>
								<view class="info">同比-41.27万吨</view>
							</view>
						</view>
						<view class="lab4">
							<view class="sup">
								<text>建材成交量</text>
								<image src="@/static/home/subpage/icn-charts.png"></image>
							</view>
							<view class="sub">
								<view class="info">3.31万吨</view>
								<view class="info">处于低位</view>
							</view>
						</view>
						<view class="lab5">
							<view class="sup">
								<text>基差率</text>
								<image src="@/static/home/subpage/icn-charts.png"></image>
							</view>
							<view class="sub">
								<view class="info">2.58%</view>
							</view>
						</view>
					</view>
					<view class="info-box">
						<view class="point"><text>-0.2分</text></view>
						<view class="bl">
							<view class="num">
								<text>-5</text><text>0</text><text>5</text>
							</view>
							<view class="axis-box">
								<view class="line-box">
									<view class="line"></view>
								</view>
								<view class="axis"><text></text><text></text><text></text></view>
								<view class="circle"></view>
							</view>
							<view class="text">
								<text>利空</text><text>中性</text><text>利多</text>
							</view>
						</view>
						<view class="explain">螺纹钢基本面评分-0.2，呈偏震荡运行。其中短期现货价格下跌，基差缩小，库存下降;长期现货利润较低对远期利好，下游需求偏弱，库存处于低位。
						</view>
						<view class="date">数据时间为2023-11-09</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 价格分析--利润 -->
		<view class="profit-modal" @touchmove.stop.prevent>
			<view class="shade" :hidden="!isprofit"></view>
			<view class="profit-box" :animation="animation3Data">
				<view class="caption">
					<text>利润</text>
					<image @click="closeProfit" src="@/static/home/subpage/close.png"></image>
				</view>
				<view class="content">
					<view class="navbar-box">
						<view class="box">
							<view class="li" :class="{'active':profitIndex==0}" @click="navprofit(0)">时序图</view>
							<view class="li" :class="{'active':profitIndex==1}" @click="navprofit(1)">季节图</view>
						</view>
					</view>
					<view class="info-box">
						<view class="date">
							<text>数据时间11-7</text>
							<text>单位: 元/吨</text>
						</view>
						<view v-if="profitIndex==0" class="fix-box">
							<view class="tab">
								<image src="@/static/home/subpage/charts2.png"></image>
								<text>利润</text>
								<text>17.22</text>
							</view>
						</view>
						<block v-else>
							<view class="fix-box fix-box1">
								<view class="tab">
									<image src="@/static/home/subpage/date_blue.png"></image>
									<text>2023年 27.22</text>
								</view>
								<view class="tab">
									<image src="@/static/home/subpage/date_red.png"></image>
									<text>2023年 27.22</text>
								</view>
								<view class="tab">
									<image src="@/static/home/subpage/date_orange.png"></image>
									<text>2021年 830.60</text>
								</view>
								<view class="tab">
									<image src="@/static/home/subpage/date_green.png"></image>
									<text>2021年 830.60</text>
								</view>
								<view class="tab">
									<image src="@/static/home/subpage/date_purple.png"></image>
									<text>2019年 --</text>
								</view>
								<view class="tab">
									<image src="@/static/home/subpage/date_gray.png"></image>
									<text>2019年 --</text>
								</view>
							</view>
						</block>
					</view>
					<view class="qiun-charts-box">
						<view class="legend">
							<text>手</text>
						</view>
						<view v-if="profitIndex==0" class="qiun-charts" style="height:276rpx">
							<l-echart ref="lineChart" @finished="lineInit"></l-echart>
						</view>
						<view v-else class="qiun-charts" style="height:276rpx">
							<l-echart ref="line1Chart" @finished="line1Init"></l-echart>
						</view>
					</view>
					<slider-range :value="[30, 90]" :min="5" :max="200" :step="5" height="20" :bar-height="7"
						:block-size="16" background-color="#fff" active-color="#EAF0FD" :format="format"
						:tipVisible="false" :decorationVisible="true" @change="handleRangeChange"></slider-range>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/utils/echarts.min.js';
	//并且引入china.json文件
	import china from '@/utils/china.json';
	//注册地图           地图名称  地图数据
	echarts.registerMap("china", china);
	export default {
		data() {
			return {
				botOperateBut: 0,
				navfixIndex: 0,
				profitIndex: 0,
				menuIndex: 0,
				infoIndex: 0,
				isdrop: false,
				sliderValue: 0,
				mapOption: {},
				radarOption: {},
				lineOption: {},
				line1Option: {},
				animationData: {},
				animation1Data: {},
				animation2Data: {},
				animation3Data: {},
				animation: {},
				rangeValue: [0, 0],
				isshare: false,
				isinventory: false,
				iscost: false,
				isprofit: false,
				isicon: 0,
			};
		},
		onReady() {
			var animation = uni.createAnimation({
				duration: 500,
				timingFunction: 'ease',
			})
			this.animation = animation;
			// console.log(china);
		},
		methods: {
			tradeLines() {
				this.isicon = this.isicon == 2 ? 0 : 2;
				this.mapInit();
			},
			mapInit() {
				// 圆圈数据
				var data = [{
						name: '北京',
						value: [116.405285, 39.904989, 50],
						itemStyle: {
							borderColor: '#0BDEC9',
							color: 'rgba(11,222,201,0.16)'
						}
					},
					{
						name: '武汉',
						value: [114.31, 30.52, 50],
						itemStyle: {
							borderColor: '#0BDEC9',
							color: 'rgba(11,222,201,0.16)'
						}
					},
					{
						name: '长沙',
						value: [113, 28.21, 40],
						itemStyle: {
							borderColor: '#A935E5',
							color: 'rgba(169,53,229,0.16)'
						}
					},
				];
				// 贸易流向数据
				var linesData = [{
					coords: [
						[116.405285, 39.904989],
						[113, 23.21]
					], // 起点和终点地图坐标
				}, ];
				// 圆圈
				var seriesData = {
					type: 'scatter', // 类型
					coordinateSystem: 'geo',
					symbol: 'circle',
					symbolSize: 50,
					itemStyle: {
						color: 'rgba(11,222,201,0.16)',
						borderColor: '#0BDEC9',
						borderWidth: 1,
					},
					label: {
						show: true,
						fontSize: 10,
						color: '#030322',
						// formatter: '{b} \n {c}'
						formatter: function(v, index) {
							return `${v.data.name}\n${v.data.value[2]}`
						},
					},
					data: data
				}
				// 贸易流向
				var seriesLinesData = {
					type: 'lines',
					coordinateSystem: 'geo',
					effect: {
						show: true,
						period: 5,
						trailLength: 0,
						symbol: 'arrow',
						color: '#356FE5',
						symbolSize: this.isicon == 2 ? 12 : 0,
					},
					lineStyle: {
						width: this.isicon == 2 ? 3 : 0,
						opacity: 1,
						curveness: 0.3,
						color: '#356FE5'
					},
					data: linesData
				}
				this.mapOption = {
					geo: {
						map: "china",
						zoom: 3.5,
						top: '40%',
						left: '-20%',
						label: {
							show: false,
						},
						itemStyle: {
							areaColor: '#F4F5F7',
							borderColor: '#ffffff', //省市边界线
							borderWidth: 2,
							borderType: 'solid',
							// shadowColor: "rgba(255,255,255,0.6)",
							// shadowBlur: 0,//阴影的模糊大小
							// shadowOffsetX:0,//阴影水平方向上的偏移距离
							// shadowOffsetY:0,//阴影垂直方向上的偏移距离。
						},
						//鼠标划入省份显示高亮
						emphasis: {
							disabled: true,
							label: {
								show: false,
							},
							itemStyle: {
								// areaColor: "#F4F5F7"
								borderWidth: 2,
							},
						},
						//默认高亮的省份
						regions: [{
								name: '河北', //这个名字要和china.json保持一致
								itemStyle: {
									areaColor: 'rgba(255,162,0,0.16)',
									color: '#FFA200',
									borderColor: '#FFA200',
									// borderWidth: 4,
								},
							},
							{
								name: '山东', //这个名字要和china.json保持一致
								itemStyle: {
									areaColor: 'rgba(255,162,0,0.16)',
									color: '#FFA200',
									borderColor: '#FFA200',
									// borderWidth: 4,
								},
							},
							{
								name: '江苏', //这个名字要和china.json保持一致
								itemStyle: {
									areaColor: 'rgba(169,53,229,0.16)',
									color: '#A935E5',
									borderColor: '#A935E5',
									// borderWidth: 4,
								},
							}
						],
					},
					roam: true, //是否开启鼠标缩放和平移漫游
					tooltip: { //是否显示提示框组件。
						show: true,
						tirgger: "item",
					},
					series: [seriesData, seriesLinesData]
				}
				setTimeout(() => {
					this.$refs.mapChart.init(echarts, chart => {
						chart.setOption(this.mapOption);
					});
				}, 1000)
				
			},
			radarInit() {
				this.radarOption = {
					radar: {
						indicator: [{
								name: '利润',
								max: 8200
							},
							{
								name: '全国均价',
								max: 6000
							},
							{
								name: '库存',
								max: 40000
							},
							{
								name: '建材成交量',
								max: 90000
							},
							{
								name: '基差率',
								max: 100000
							},
						],
						axisName: {
							show: false,
						},
						nameGap: 0,
						radius: '100%',
						axisLine: {
							lineStyle: {
								color: '#F4F5F7'
							}
						},
						splitLine: {
							lineStyle: {
								color: '#F4F5F7'
							}
						},
						splitArea: {
							areaStyle: {
								color: '#fff'
							}
						}
					},
					series: [{
						name: '价格',
						type: 'radar',
						symbolSize: 4,
						itemStyle: {
							color: '#F1B82B',
							borderWidth: 0
						},
						lineStyle: {
							width: 0
						},
						data: [{
							value: [4200, 3000, 20000, 35000, 50000],
							areaStyle: {
								color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [{
										color: '#EA8124',
										offset: 0
									},
									{
										color: '#F9EC32',
										offset: 1
									}
								])
							}
						}, ]
					}]
				};
				this.$refs.radarChart.init(echarts, chart => {
					chart.setOption(this.radarOption);
				});
			},
			lineInit() {
				this.lineOption = {
					color: 'rgba(0,0,0,0.45)',
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						right: '2',
						left: '0',
						top: '10',
						bottom: '10',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24',
							'2023-10-25', '2023-10-26', '2023-10-27'
						],
						axisTick: {
							show: false,
							alignWithLabel: true
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: false,
							// margin: 10,
							// formatter: function (value, index) {
							// 	if(index==0||index==7) return value;
							// },
							// showMinLabel : true,
							// showMaxLabel : true,
						},
					}],
					yAxis: [{
							type: 'value',
							// name: '手',
							position: 'left',
							alignTicks: true,
							// offset: 80,
							axisLine: {
								show: false,
								lineStyle: {
									color: 'rgba(0,0,0,0.45)',
								}
							},
							axisLabel: {
								show: true,
								formatter: '{value}'
							},
						},
						{
							type: 'value',
							// name: '元',
							position: 'right',
							alignTicks: true,
							axisLine: {
								show: false,
								lineStyle: {
									color: 'rgba(0,0,0,0.45)',
								}
							},
							axisLabel: {
								show: true,
								formatter: function(value, index) {
									return value.toFixed(2);
								}
								// formatter: '{value}'
							},
							min: 1600,
							max: 2000,
						}
					],
					series: [{
						name: '手',
						type: 'line',
						yAxisIndex: 0,
						data: [4301, 17200, 4308, 15022, 4301, 17200, 4308, 15022],
						symbol: 'none',
						itemStyle: {
							color: '#356FE5'
						},
						lineStyle: {
							width: 2
						},
					}]
				}
				this.$refs.lineChart.init(echarts, chart => {
					chart.setOption(this.lineOption);
				});
			},
			line1Init() {
				this.line1Option = {
					color: 'rgba(0,0,0,0.45)',
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					grid: {
						right: '2',
						left: '0',
						top: '10',
						bottom: '10',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24',
							'2023-10-25', '2023-10-26', '2023-10-27'
						],
						axisTick: {
							show: false,
							alignWithLabel: true
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: false,
							// margin: 10,
							// formatter: function (value, index) {
							// 	if(index==0||index==7) return value;
							// },
							// showMinLabel : true,
							// showMaxLabel : true,
						},
					}],
					yAxis: [{
							type: 'value',
							// name: '手',
							position: 'left',
							alignTicks: true,
							// offset: 80,
							axisLine: {
								show: false,
								lineStyle: {
									color: 'rgba(0,0,0,0.45)',
								}
							},
							axisLabel: {
								show: true,
								formatter: '{value}'
							},
						},
						{
							type: 'value',
							// name: '元',
							position: 'right',
							alignTicks: true,
							axisLine: {
								show: false,
								lineStyle: {
									color: 'rgba(0,0,0,0.45)',
								}
							},
							axisLabel: {
								show: true,
								formatter: function(value, index) {
									return value.toFixed(2);
								}
								// formatter: '{value}'
							},
							min: 1600,
							max: 2000,
						}
					],
					series: [{
							name: '手',
							type: 'line',
							yAxisIndex: 0,
							data: [4301, 17200, 4308, 15022, 4301, 17200, 4308, 15022],
							symbol: 'none',
							itemStyle: {
								color: '#356FE5'
							},
							lineStyle: {
								width: 2
							},
						},
						{
							name: '手',
							type: 'line',
							yAxisIndex: 0,
							data: [4801, 17200, 4308, 12022, 3301, 17200, 4008, 11022],
							symbol: 'none',
							itemStyle: {
								color: '#EE5953'
							},
							lineStyle: {
								width: 2
							},
						}
					]
				}
				this.$refs.line1Chart.init(echarts, chart => {
					chart.setOption(this.line1Option);
				});
			},
			back() {
				uni.navigateBack();
			},
			navfix(index) {
				this.navfixIndex = index;
				if (index == 1) this.chooseInventory();
			},
			menufix(index) {
				this.menuIndex = index;
			},
			infofix(index) {
				this.infoIndex = index;
			},
			endSlider(e) {
				console.log(e)
			},
			sharefix() {
				this.isshare = true;
				this.animation.translateY(0).step();
				this.animationData = this.animation.export();
			},
			closesharefix() {
				this.isshare = false;
				this.animation.translateY("100%").step();
				this.animationData = this.animation.export();
			},
			chooseInventory() {
				this.isinventory = true;
				this.animation.translateY(0).step();
				this.animation1Data = this.animation.export();
			},
			closeInventory() {
				this.isinventory = false;
				this.animation.translateY("100%").step();
				this.animation1Data = this.animation.export();
			},
			chooseCost() {
				this.isicon = 1;
				this.iscost = true;
				this.animation.translateY(0).step();
				this.animation2Data = this.animation.export();
			},
			closeCost() {
				this.isicon = 0;
				this.iscost = false;
				this.animation.translateY("100%").step();
				this.animation2Data = this.animation.export();
			},
			chooseProfit() {
				this.isprofit = true;
				this.animation.translateY(0).step();
				this.animation3Data = this.animation.export();
				this.closeCost();
			},
			closeProfit() {
				this.isprofit = false;
				this.animation.translateY("100%").step();
				this.animation3Data = this.animation.export();
			},
			navprofit(index) {
				this.profitIndex = index;
				setTimeout(() => {
					if (index == 0) this.lineInit();
					if (index == 1) this.line1Init();
				}, 100);
			},
			format(val) {
				return val + '%'
			},
			handleRangeChange(e) {
				this.rangeValue = e;
				// console.log(this.rangeValue);
			},
		}
	}
</script>

<style lang="scss">
	.content {
		.nav-fix {
			padding: 24rpx 24rpx 0;
			position: relative;

			.group-drop {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.drop-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 80rpx;
					border-radius: 16rpx;
					border: 2rpx solid #F4F5F7;
					width: 438rpx;
					padding: 0 16rpx 0 20rpx;
					box-sizing: border-box;

					& image {
						width: 46rpx;
						height: 46rpx;
						margin-left: 8rpx;
					}

					& text {
						font-size: 28rpx;
						font-weight: bold;
						color: #EE5953;
					}
				}

				.right {
					display: flex;
					align-items: center;
					width: 248rpx;
					height: 80rpx;
					background: #F4F5F7;
					border-radius: 16rpx;
					padding: 4rpx;
					box-sizing: border-box;

					.li {
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.6);
						flex: 1;
						text-align: center;
						height: 100%;
						line-height: 72rpx;
					}

					.li.active {
						background-color: #fff;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.8);
						border-radius: 16rpx;
					}
				}
			}

			.drop-down {
				position: absolute;
				display: flex;
				width: 702rpx;
				left: 24rpx;
				top: 122rpx;
				border-radius: 16rpx;
				border: 2rpx solid #D6D6D7;
				overflow: hidden;
				z-index: 90;
				background-color: #fff;

				.left-menu {
					width: 178rpx;
					padding-top: 48rpx;
					padding-bottom: 48rpx;
					background: #F4F5F7;
					overflow-y: auto;
					max-height: 60vh;
					box-sizing: border-box;

					.tl {
						height: 72rpx;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.4);
						text-align: center;
						line-height: 72rpx;
					}

					.tl.active {
						font-weight: bold;
						color: rgba(0, 0, 0, 0.8);
						background-color: #fff;
					}
				}

				.right-info {
					flex: 1;
					padding: 0 24rpx;
					overflow-y: auto;
					max-height: 60vh;
					box-sizing: border-box;

					.item {
						border-bottom: 2rpx solid #F6F7F9;

						.title {
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.4);
							padding: 24rpx 0 20rpx 0;
						}

						.tl {
							font-size: 28rpx;
							color: rgba(0, 0, 0, 0.8);
							padding: 12rpx 0;
							display: flex;
							align-items: center;
							line-height: 40rpx;

							.tab {
								width: 64rpx;
								height: 30rpx;
								margin-left: 8rpx;
							}
						}

						.tl.active {
							color: #EE5953;
							font-weight: bold;
						}
					}
				}
			}
		}

		.bottom-fix-box {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0px -8rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
			z-index: 99;

			.bottom-fix {
				padding: 24rpx;

				.sup-date {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.6);

					& text {
						margin-right: 80rpx;
					}

					.active {
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.8);
						margin-right: 92rpx;
					}
				}

				.slider-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 26rpx;

					.text {
						font-size: 20rpx;
						font-family: MiSans-Regular, MiSans-Regular;
						font-weight: normal;
						color: #030322;
					}

					.slider {
						flex: 1;
						padding: 0 16rpx 0 24rpx;
					}
				}

				.sub-btns {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 24rpx;

					& image {
						width: 80rpx;
						height: 80rpx;
					}

					.right {
						display: flex;
						align-items: center;

						.btn {
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.8);
							width: 160rpx;
							height: 66rpx;
							background: #FFFFFF;
							border-radius: 16rpx;
							border: 2rpx solid #F4F5F7;
							box-sizing: border-box;
							text-align: center;
							line-height: 66rpx;
							margin-left: 16rpx;
						}
					}
				}
			}
		}

		.qiun-charts {
			width: 750rpx;
			// height:80vh;
			height: calc(100vh - 236rpx - 104rpx);
			position: relative;

			.area-box {
				background: #FFFFFF;
				border-radius: 16rpx;
				border: 2rpx solid #F4F5F7;
				padding: 24rpx;
				box-sizing: border-box;
				position: absolute;
				left: 24rpx;
				top: 20rpx;
				z-index: 1;

				.li {
					display: flex;
					align-items: center;
					margin-top: 26rpx;

					.quan {
						width: 24rpx;
						height: 24rpx;
						border-radius: 50%;
						margin-right: 16rpx;
						box-sizing: border-box;
					}

					.br-orange {
						background: rgba(255, 162, 0, 0.16);
						border: 2rpx solid #FFA200;
					}

					.br-blue {
						background: rgba(53, 111, 229, 0.16);
						border: 2rpx solid #356FE5;
					}

					.br-green {
						background: rgba(11, 222, 201, 0.16);
						border: 2rpx solid #0BDEC9;
					}

					.br-purple {
						background: rgba(169, 53, 229, 0.16);
						border: 2rpx solid #A935E5;
					}

					.text {
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.8);
					}
				}

				.li:first-child {
					margin-top: 0;
				}
			}

			.icon-box {
				position: absolute;
				right: 24rpx;
				top: 20rpx;
				z-index: 1;

				.icon {
					width: 96rpx;
					height: 96rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					border: 2rpx solid #F4F5F7;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					.image {
						width: 32rpx;
						height: 32rpx;
					}

					.text {
						margin-top: 8rpx;
						font-size: 20rpx;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.8);
					}
				}

				.icon:last-child {
					margin-top: 24rpx;

					.image {
						height: 25rpx;
					}
				}

				.icon.cur {
					.text {
						color: #356FE5;
					}
				}
			}

			.pricechange {
				position: absolute;
				left: 24rpx;
				bottom: 105rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				border: 2rpx solid #F4F5F7;
				z-index: 1;
				padding: 24rpx;
				box-sizing: border-box;

				.sup {
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.8);
				}

				.center-box {
					padding: 24rpx 0 16rpx;
					display: flex;

					.left {
						width: 16rpx;
						height: 194rpx;
						// background-color: red;
						background: linear-gradient(180deg, #EE5953 0%, #E7A4A1 17%, #F1DCDC 45%, #92DAA6 73%, #33C45B 100%);
						border-radius: 14rpx;
					}

					.right {
						display: flex;
						align-items: center;
						justify-content: space-around;
						flex-direction: column;
						margin-left: 16rpx;

						.text {
							font-size: 20rpx;
							font-family: MiSans-Regular, MiSans-Regular;
							font-weight: normal;
							color: #030322;
						}
					}
				}

				.sub {
					font-size: 20rpx;
					font-family: MiSans-Regular, MiSans-Regular;
					font-weight: normal;
					color: rgba(0, 0, 0, 0.4);
				}
			}
		}
	}

	.inventory-modal {
		.inventory-box {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			transform: translateY(100%);
			z-index: 100;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0px 0px;
			overflow: hidden;

			.caption {
				height: 114rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);
				position: relative;
				line-height: 114rpx;
				border-bottom: 2rpx solid #F6F7F9;
				box-sizing: border-box;

				& image {
					width: 96rpx;
					height: 96rpx;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}

			.item-box {
				padding-left: 32rpx;
				padding-right: 16rpx;
				max-height: 50vh;
				box-sizing: border-box;

				.item {
					padding: 28rpx 0 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);

					.left {
						.sup {
							font-size: 28rpx;
							font-weight: bold;
							color: rgba(0, 0, 0, 0.8);
							max-width: 640rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.sub {
							margin-top: 8rpx;
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.6);
						}
					}

					.icon-right {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

			.dateinfo {
				padding: 32rpx 16rpx 32rpx 32rpx;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.4);
			}
		}
	}

	.cost-modal {
		.cost-box {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			transform: translateY(100%);
			z-index: 100;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0px 0px;
			overflow: hidden;

			.caption {
				height: 114rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);
				position: relative;
				line-height: 114rpx;
				border-bottom: 2rpx solid #F6F7F9;
				box-sizing: border-box;

				& image {
					width: 96rpx;
					height: 96rpx;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}

			.bodys {
				padding: 0 32rpx 32rpx;

				.lab-box {
					position: relative;
					height: 580rpx;
					padding: 130rpx 188rpx 156rpx;
					box-sizing: border-box;

					.qiun-charts {
						width: 308rpx;
						height: 293rpx;
					}

					.lab1,
					.lab2,
					.lab3,
					.lab4,
					.lab5 {
						position: absolute;
						display: flex;
						flex-direction: column;

						.sup {
							display: flex;
							align-items: center;

							& text {
								font-size: 28rpx;
								font-weight: bold;
								color: rgba(0, 0, 0, 0.8);
							}

							& image {
								width: 46rpx;
								height: 46rpx;
							}
						}

						.sub {
							margin-top: 4rpx;

							.info {
								font-size: 24rpx;
								color: rgba(0, 0, 0, 0.4);
								line-height: 34rpx;
								text-align: right;
							}
						}
					}

					.lab1 {
						left: 50%;
						top: 38rpx;
						transform: translateX(-50%);
						align-items: center;
					}

					.lab2 {
						left: 28rpx;
						top: 210rpx;
						align-items: flex-end;
					}

					.lab5 {
						right: 40rpx;
						top: 210rpx;
						align-items: center;
					}

					.lab3 {
						left: 0;
						top: 440rpx;
						width: 343rpx;
						align-items: flex-end;
						padding-right: 80rpx;
						box-sizing: border-box;
					}

					.lab4 {
						right: 0;
						top: 440rpx;
						width: 343rpx;
						align-items: flex-end;
						padding-right: 80rpx;
						box-sizing: border-box;
					}
				}

				.info-box {
					background: #F4F5F7;
					border-radius: 16rpx;
					padding: 24rpx 32rpx;

					.point {
						display: flex;
						align-items: center;
						justify-content: center;

						& text {
							height: 50rpx;
							background: #EE5953;
							border-radius: 8rpx;
							padding: 0 16rpx;
							line-height: 50rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #FFFFFF;
						}
					}

					.bl {
						width: 100%;

						.num {
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.4);
						}

						.axis-box {
							height: 12rpx;
							margin: 8rpx 0;
							position: relative;

							.line-box {
								height: 100%;
								display: flex;
								align-items: center;

								.line {
									height: 2rpx;
									width: 100%;
									background-color: #C3C4C6;
								}
							}

							.axis {
								display: flex;
								align-items: center;
								justify-content: space-between;
								position: absolute;
								left: 0;
								top: 0;
								width: 100%;
								height: 100%;

								& text {
									width: 2rpx;
									height: 12rpx;
									background-color: #C3C4C6;
								}
							}

							.circle {
								width: 12rpx;
								height: 12rpx;
								background: #EE5953;
								position: absolute;
								left: 40%;
								top: 50%;
								margin-top: -6rpx;
								border-radius: 50%;
							}
						}

						.text {
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.4);
						}
					}

					.explain {
						margin-top: 30rpx;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.8);
						white-space: normal;
					}

					.date {
						margin-top: 24rpx;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.4);
						white-space: normal;
					}
				}
			}
		}
	}

	.profit-modal {
		.profit-box {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			transform: translateY(100%);
			z-index: 100;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0px 0px;
			overflow: hidden;

			.caption {
				height: 114rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);
				position: relative;
				line-height: 114rpx;
				border-bottom: 2rpx solid #F6F7F9;
				box-sizing: border-box;

				& image {
					width: 96rpx;
					height: 96rpx;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}

			.content {
				padding: 34rpx 24rpx;

				.navbar-box {
					background-color: #fff;
					z-index: 3;
					position: relative;

					.box {
						display: flex;
						align-items: center;
						width: 248rpx;
						height: 80rpx;
						background: #F7F7F7;
						border-radius: 16rpx;
						padding: 4rpx;
						box-sizing: border-box;
					}

					.li {
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.4);
						flex: 1;
						text-align: center;
						height: 100%;
						line-height: 72rpx;
					}

					.li.active {
						background-color: #fff;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.8);
						border-radius: 16rpx;
					}
				}

				.info-box {
					margin-top: 24rpx;
					padding: 24rpx 24rpx 16rpx;
					background: #F4F5F7;
					border-radius: 16rpx;

					.date {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.8);
						// & text:last-child{
						// 	font-size: 24rpx;
						// 	color: #356FE5;
						// }
					}

					.fix-box {
						margin-top: 16rpx;
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.tab {
							display: flex;
							align-items: center;
							width: 50%;
							margin-top: 8rpx;

							& image {
								width: 48rpx;
								height: 48rpx;
							}

							& text {
								font-size: 24rpx;
								color: rgba(0, 0, 0, 0.6);
							}

							& text:last-child {
								font-weight: bold;
								color: rgba(0, 0, 0, 0.8);
								padding-left: 8rpx;
							}
						}
					}

					.fix-box1 {
						.tab {
							& text:last-child {
								font-weight: 400;
							}
						}
					}
				}

				.qiun-charts-box {
					margin-top: 32rpx;

					.legend {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.6);
						// margin-top:24rpx;
					}

					.qiun-charts {
						width: 702rpx;
						height: 270rpx;
						margin-top: 16rpx;
					}
				}
			}
		}
	}
</style>